<template>
    <div style="width: 1200px;background-color: pink;margin: 10px auto;">
        <el-card>
            <div style="display: flex;flex-wrap: wrap;justify-content: space-around">
                <el-card v-for="(item,index) in tagList" class="fenlei"
                         style="width: 230px;text-align: center;margin-top: 10px">
                    <el-image
                            style="width: 64px; height: 64px;border-radius: 32px"
                            :src="item.tagImg"
                            :preview-src-list="[item.tagImg]"
                    ></el-image>
                    <h4 style="font-weight: 200;font-size: 18px;cursor: pointer"><a @click="toTagList(item.id)">{{item.name}}</a></h4>
                    <span style="display: inline-block;margin-top: 15px;font-size: 12px;color: #969696">文章</span>
                </el-card>

            </div>


        </el-card>
    </div>
</template>

<script>
    // import Global from "../assets/js/Global";
    import Global from "../../public/static/Global";

    export default {
        name: "Tag",
        methods: {
            async getTagInfo() {
                const {data: res} = await this.$http.get('tag')
                for (let i = 0; i < res.data.length; i++) {
                    res.data[i].tagImg = Global.baseUrl + res.data[i].tagImg;
                    // console.log(res.data[i].createTime);
                }
                this.tagList = res.data;
                console.log(res);
            },
            toTagList(id) {
                // console.log(id);
                this.$router.push({
                    name: 'TagList',
                    query: {
                        id: id
                    }
                })
            }
        },
        data() {
            return {
                tagList: []
            }
        },
        created() {
            this.getTagInfo();

        }
    }
</script>

<style lang="less" scoped>
    .fenlei {
        a {
            text-decoration: none;
            color: #303133;
        }
        transition: all 0.5s;

        a:hover {
            color: #40A1FF;
        }
    }
    .fenlei:hover{
        transform: translateY(-20px);    // 上移
        /*margin: 0 0 20px 0;*/
        box-shadow: 5px 8px 4px 2px #A9A9A9;
    }
</style>